<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>跳动的心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: -webkit-fill-available;
            background: linear-gradient(-45deg, #ff758c, #ff7eb3, #7fdbff, #5ab9ea);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            overflow: hidden;
            touch-action: manipulation;
            padding: 20px;
        }
        
        .container {
            position: relative;
            width: 100%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .heart-container {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
            padding: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        .heart {
            position: relative;
            width: 120px;
            height: 108px;
            margin: 0 auto 20px;
            animation: heartbeat 1.2s infinite;
        }
        
        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 60px;
            top: 0;
            width: 60px;
            height: 96px;
            background: #ff3e3e;
            border-radius: 60px 60px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
        }
        
        .heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
        
        .message {
            margin: 20px 0;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            font-size: 1.4rem;
            line-height: 1.5;
            font-weight: 500;
        }
        
        .click-text {
            margin: 15px 0;
            color: white;
            font-size: 0.95rem;
            opacity: 0.9;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .controls {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 0.9rem;
            backdrop-filter: blur(5px);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.3);
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            15% { transform: scale(1.1); }
            30% { transform: scale(1); }
            45% { transform: scale(1.1); }
            60% { transform: scale(1); }
            100% { transform: scale(1); }
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* 手机适配 */
        @media (max-width: 768px) {
            .heart {
                width: 100px;
                height: 90px;
            }
            
            .heart:before,
            .heart:after {
                left: 50px;
                width: 50px;
                height: 80px;
            }
            
            .message {
                font-size: 1.2rem;
            }
            
            .heart-container {
                padding: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .heart {
                width: 80px;
                height: 72px;
            }
            
            .heart:before,
            .heart:after {
                left: 40px;
                width: 40px;
                height: 64px;
            }
            
            .message {
                font-size: 1.1rem;
            }
            
            .btn {
                padding: 8px 16px;
                font-size: 0.85rem;
            }
        }
        
        /* 防止移动端横屏时布局错乱 */
        @media (max-height: 500px) and (orientation: landscape) {
            body {
                padding: 10px;
            }
            
            .container {
                max-width: 90%;
                flex-direction: row;
            }
            
            .heart-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 15px;
            }
            
            .heart {
                margin: 0 15px 0 0;
                width: 70px;
                height: 63px;
            }
            
            .heart:before,
            .heart:after {
                left: 35px;
                width: 35px;
                height: 56px;
            }
            
            .text-content {
                text-align: left;
            }
            
            .message {
                font-size: 1rem;
                margin: 5px 0;
            }
            
            .click-text {
                font-size: 0.8rem;
                margin: 5px 0;
            }
            
            .controls {
                margin-top: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="particleCanvas"></canvas>
        
        <div class="heart-container">
            <div class="heart"></div>
            <div class="message">爱意随风起，风止意难平</div>
            <div class="click-text">
                <i class="fas fa-hand-point-up"></i>
                <span>点击屏幕添加更多爱心</span>
            </div>
            
            <div class="controls">
                <button class="btn" id="changeMsgBtn">换一句话</button>
                <button class="btn" id="changeColorBtn">换背景色</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');
            const container = document.querySelector('.container');
            
            // 设置canvas尺寸为窗口尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            // 粒子系统
            const particles = [];
            const heartParticles = [];
            
            // 创建背景粒子
            function createParticles() {
                for (let i = 0; i < 80; i++) {
                    particles.push({
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        radius: Math.random() * 2 + 1,
                        speed: Math.random() * 2 + 0.5,
                        opacity: Math.random() * 0.5 + 0.2,
                        angle: Math.random() * 360
                    });
                }
            }
            
            // 绘制背景粒子
            function drawParticles() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制背景粒子
                particles.forEach(particle => {
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
                    ctx.fill();
                    
                    // 移动粒子
                    particle.y += particle.speed;
                    particle.x += Math.sin(particle.angle) * 0.5;
                    
                    // 如果粒子超出屏幕，重置位置
                    if (particle.y > canvas.height) {
                        particle.y = 0;
                        particle.x = Math.random() * canvas.width;
                    }
                });
                
                // 绘制爱心粒子
                heartParticles.forEach((particle, index) => {
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(255, 62, 62, ${particle.opacity})`;
                    ctx.fill();
                    
                    // 更新粒子位置和透明度
                    particle.y += particle.speedY;
                    particle.x += particle.speedX;
                    particle.opacity -= 0.01;
                    particle.radius -= 0.05;
                    
                    // 移除不可见的粒子
                    if (particle.opacity <= 0 || particle.radius <= 0) {
                        heartParticles.splice(index, 1);
                    }
                });
                
                requestAnimationFrame(drawParticles);
            }
            
            // 创建爱心形状的粒子
            function createHeartParticles(x, y) {
                for (let i = 0; i < 40; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * 3 + 1;
                    
                    heartParticles.push({
                        x: x,
                        y: y,
                        radius: Math.random() * 4 + 2,
                        speedX: Math.cos(angle) * speed,
                        speedY: Math.sin(angle) * speed,
                        opacity: Math.random() * 0.5 + 0.5
                    });
                }
            }
            
            // 点击屏幕添加爱心粒子
            document.addEventListener('click', function(e) {
                createHeartParticles(e.clientX, e.clientY);
            });
            
            // 触摸事件支持
            document.addEventListener('touchstart', function(e) {
                const touch = e.touches[0];
                createHeartParticles(touch.clientX, touch.clientY);
            }, { passive: true });
            
            // 初始化
            createParticles();
            drawParticles();
            
            // 添加随机消息
            const messages = [
                "余生漫漫，我愿与你风雨中执手，平淡中偕老",
                "山河远阔，人间烟火，无一是你，无一不是你",
                "浮世三千，吾爱有三：日、月与卿。日为朝，月为暮，卿为朝朝暮暮",
                "我迈过人间万物，我从不慌张，唯独你踏过山水归来一刻，我方寸大乱，小鹿还乱撞",
                "世间万物皆苦，你明目张胆的偏爱就是救赎",
                "乍见心欢，小别思恋，久处仍怦然",
                "你是我温暖的手套，冰冷的啤酒，带着阳光味道的衬衫，日复一日的梦想",
                "我喜欢你，像风走了八千里，不问归期",
                "你是我今生渡不过的劫，多看一眼就心软，拥抱一下就沦陷",
                "时光静好，与君语；细水流年，与君同；繁华落尽，与君老"
            ];
            
            const messageElement = document.querySelector('.message');
            let currentIndex = 0;
            
            // 换消息函数
            function changeMessage() {
                messageElement.style.opacity = 0;
                
                setTimeout(() => {
                    currentIndex = (currentIndex + 1) % messages.length;
                    messageElement.textContent = messages[currentIndex];
                    messageElement.style.opacity = 1;
                }, 300);
            }
            
            // 自动更换消息
            setInterval(changeMessage, 5000);
            
            // 按钮事件
            document.getElementById('changeMsgBtn').addEventListener('click', changeMessage);
            
            // 换背景色
            document.getElementById('changeColorBtn').addEventListener('click', function() {
                const colors = [
                    ['#ff758c', '#ff7eb3', '#7fdbff', '#5ab9ea'],
                    ['#ff9a8b', '#ff6a88', '#ff99ac', '#ffc2d1'],
                    ['#6a11cb', '#2575fc', '#0093E9', '#80D0C7'],
                    ['#FF61D2', '#FE9090', '#FFC3A0', '#FFD700'],
                    ['#00DBDE', '#FC00FF', '#00FFC6', '#00FF95'],
                    ['#FBAB7E', '#F7CE68', '#FF9D6C', '#FF6B6B']
                ];
                
                const randomColors = colors[Math.floor(Math.random() * colors.length)];
                document.body.style.background = `linear-gradient(-45deg, ${randomColors[0]}, ${randomColors[1]}, ${randomColors[2]}, ${randomColors[3]})`;
            });
            
            // 添加一些初始粒子效果
            setTimeout(() => {
                createHeartParticles(canvas.width/2, canvas.height/2);
            }, 500);
            
            setTimeout(() => {
                createHeartParticles(canvas.width/3, canvas.height/3);
                createHeartParticles(canvas.width*2/3, canvas.height*2/3);
            }, 1000);
        });
    </script>
</body>
</html>